<template>
    <div>
        <el-dialog :title="type == 'add' ? '新增' : '修改'" :visible.sync="isShow" width="60%">


            <!-- 表格 -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- pid是上级的id 这里用下拉框 选项是上级的名字，选项的值是上级的id -->
                <!-- 下拉框的逻辑：发请求获取options的数据 循环数组生成option -->
                <el-form-item label="上级目录" prop="pid">
                    <el-select v-model="ruleForm.pid" placeholder="请选择活动区域">
                        <el-option label="顶级目录" :value="0"></el-option>
                        <el-option v-for="(cate, index) in cateOptions" :key="index" :label="cate.catename"
                            :value="cate.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="名称" prop="catename">
                    <el-input v-model="ruleForm.catename"></el-input>
                </el-form-item>

                <el-form-item label="图片">
                    <!-- action 上传的地址 -->
                    <!-- limit 上传的数量限制 -->
                    <!-- on-exceed 超出限制时执行的函数 -->
                    <!-- auto-upload 自动上传 这里的接口是所有数据一起上传 所以关闭自动上传 -->
                    <!-- on-change 文件变化时的钩子 -->
                    <!-- file-list 历史文件的列表 -->
                    <el-upload action="#" list-type="picture-card" :limit="3" :on-exceed="handleExceed"
                        :auto-upload="false" :on-remove="handleRemove" :on-change="handleChange" :file-list="fileList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <!-- pid？  title url status type 提交按钮调用接口menuedit或者menuadd -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getcateList, addCate, editCate } from "../../apis";
export default {
    props: ["isfoShow", "type"],
    data() {
        return {
            // 上传过的历史文件
            fileList: [],
            cateOptions: [],//下拉的数据 获取pid
            isShow: false,
            isEditTo: true,
            //表单数据
            ruleForm: {
                pid: 0,
                catename: '',
                img: '',
                status: 1
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
            }
        }
    },
    watch: {
        isfoShow() {
            this.isShow = true;
        },
        edit() {
            this.isEditTo = false
            if (!this.isEditTo) {
                this.info = this.infolist
            }
        }
    },
    //发请求 获取下拉菜单数据
    created() {
        this.getCatelist()
    },
    methods: {
        setVal(data) {
            this.fileList = []; // 清空上次的图片
            //给表单项赋值
            // console.log(data);
            //一个简单的深拷贝
            this.ruleForm = { ...data }
            // console.log(data); //处理图片的显示
            if (data.img) {
                this.fileList.push({
                    name: 'food.jpeg',
                    url: 'http://localhost:3000' + data.img,
                })
            }
        },
        // 图片的函数
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件`
            );
        },
        handleChange(file) {
            // console.log(file, fileList);
            // 这里获取了文件
            this.ruleForm.img = file.raw;
        },
        handleRemove() {
            // console.log(file, fileList);
            this.ruleForm.img = ''
        },
        async getCatelist() {
            let res = await getcateList()
            this.cateOptions = res.list;
        },
        submit() {
            //校验表单  
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {//校验成功 提交数据
                    console.log(this.ruleForm);
                    // 只要请求中可能包含图片 就需要将数据类型转为formdata 提交给后台的就是这个类型的数据
                    let fd1 = new FormData();
                    // 现在的fd1是空的 数据来源是ruleForm 需要将ruleForm中的数据存入fd1 并提交
                    // 遍历ruleForm 将数据存入fd1
                    for (const key in this.ruleForm) {
                        fd1.append(key, this.ruleForm[key])
                    }
                    // fd1.forEach((v,k) => { // 这个代码是演示如何查看fd中的数据 不能直接log
                    //   console.log(k, v);
                    // })

                    //获取ruleForm数据
                    // console.log(this.ruleForm);
                    //先判断新增还是修改
                    let res;
                    if (this.type == 'add') {
                        res = await addCate(fd1)
                    } else {
                        res = await editCate(fd1)
                    }
                    // console.log(res)
                    if (res.code == 200) {
                        this.$emit('update')
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            this.isShow = false;
        },
    }
};
</script>

<style>

</style>